<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0，maxinum-scale=1.0,user-scalable=0">
    <title>推书分类</title>
</head>
<link rel="stylesheet" href="font_8nnu897a76k/iconfont.css" />
<link rel="stylesheet" href="css/classify.css" />
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2541877_3w46bwcvdhx.css" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/Detail.css" />

<body>
    <header>
        <a href="index.html"><img src="images/推书-logo.png" alt="logo" /></a>
        <div class="search"><input type="search" value="请搜索"><button><img src="images/search.png" alt="搜索"></button></div>
    </header>
    <div class="lobotu">
        <ol>
            <li>
                <a href="#"><img src="images/lun1.png" alt="ad"></a>
            </li>
            <li>
                <a href="#"><img src="images/lun2.png" alt="ad"></a>
            </li>
            <li>
                <a href="#"><img src="images/lun3.png" alt="ad"></a>
            </li>
        </ol>
        <ul class="ul">
            <li index="1"></li>
            <li index="2"></li>
            <li index="3"></li>
        </ul>
    </div>
    <script>
        function animate(obj, target) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var step = (target - obj.offsetLeft) / 10;
                if (target < 0) {
                    if (obj.offsetLeft <= target) {
                        clearInterval(obj.timer);
                    }
                } else {
                    if (obj.offsetLeft >= target) {
                        clearInterval(obj.timer);
                    }
                }
                obj.style.left = obj.offsetLeft + step + 'px';
                console.log('timer');
            }, 30);
        }
        var lis = document.querySelector('.ul');
        var oli = document.querySelector('ol');
        var curindex = 0;
        var offsetW = oli.parentElement.offsetWidth;
        console.log(lis.children);
        oli.addEventListener('mouseout', function() {
            oli.mytimer = setInterval(function() {
                animate(oli, -(curindex++ % 3) * offsetW)
            }, 3500)
        })
        oli.addEventListener('mouseover', function() {
                clearInterval(obj.mytimer);
            })
            /*点击轮播 */
        for (var i = 0; i < lis.children.length; i++) {
            lis.children[i].onclick = function() {

                for (var j = 0; j < lis.children.length; j++) {
                    lis.children[j].className = '';
                }
                this.className = 'current';
                var index = this.getAttribute('index');
                console.log(index);

                console.log(offsetW);
                curindex = index;

                animate(oli, -(index - 1) * offsetW);
            }
        }
    </script>
    <div class="wrap">



        <!-- 详情页 -->
        <div class="Mask">

            <!-- 页面 -->
            <div>
                <div class="close"></div>
                <!-- 内容 -->
                <div class="detail">
                    <div class="border left"></div>
                    <div class="border right"></div>
                    <div class="bookinfo"><img src="images/bookcover.png" alt="bookcover">
                        <h1>书名</h1>
                        <div class="first"><img src="images/作者.png" alt="icon"><span>作者: <a href="#">xx</a></span><br>
                            <img src="images/出.png" alt="icon"><span>出版社: <a href="#">xxxxx</a></span></div>
                        <div class="mid"><img src="images/时间.png" alt="icon"><span>出版时间: xxxx/xx/xx</span><br>
                            <img src="images/图书馆.png" alt="icon"><span>图书馆藏书：x本<br><span>x楼x架xx</span></span>
                        </div>
                        <div class="bottom"><img src="images/书(1).png" alt="icon" class="bottomfir">
                            <a href="#"><i class="iconfont icon-snssharedoubanon"></i></a>
                            <a href="#"><i class="iconfont icon-zhihu-square"></i></a>
                            <br><img src="images/购买.png" alt="icon">
                            <a href="#"><i class="iconfont icon-jingdongbaitiao"></i></a>
                            <a href="#"><i class="iconfont icon-dangdangwang"></i></a>
                            <a href="#"><i class="iconfont icon-amazon"></i></a>
                        </div>
                    </div>
                    <article>
                        <div>
                            <h2>作者简介</h2>
                            <p> 作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。作者很帅很厉害。</p>
                        </div>
                        <div>
                            <h2>书籍简介</h2>
                            <p> 这本书很好看，真的。这本书很好看，真的。这本书很好看，真的。这本书很好看，真的。这本书很好看，真的。这本书很好看，真的。这本书很好看，真的。这本书很好看，真的。这本书很好看，真的。这本书很好看，真的。</p>
                        </div>
                    </article>
                </div>
            </div>
        </div>

        <nav>分类：<a href="#">文学</a><a href="#">科技</a><a href="#">哲学</a><a href="#">政治</a></nav>
        <div class="mainpage">
            <div class="book"><img src="images/book.png" alt="book">
                <div class="star"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星 "><img src="images/白.png" alt="五角星"></div>
                <div class="info"><b>书名</b> <b>作者</b></div>
            </div>
            <div class="book"><img src="images/book.png" alt="book">
                <div class="star"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星 "><img src="images/白.png" alt="五角星"></div>
                <div class="info"><b>书名</b> <b>作者</b></div>
            </div>
            <div class="book"><img src="images/book.png" alt="book">
                <div class="star"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星 "><img src="images/白.png" alt="五角星"></div>
                <div class="info"><b>书名</b> <b>作者</b></div>
            </div>
            <div class="lastbook"><img src="images/book.png" alt="book">
                <div class="star"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星 "><img src="images/白.png" alt="五角星"></div>
                <div class="info"><b>书名</b> <b>作者</b></div>
            </div>
            <div class="bottom book"><img src="images/book.png" alt="book">
                <div class="star"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星 "><img src="images/白.png" alt="五角星"></div>
                <div class="info"><b>书名</b> <b>作者</b></div>
            </div>
            <div class="bottom book"><img src="images/book.png" alt="book">
                <div class="star"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星 "><img src="images/白.png" alt="五角星"></div>
                <div class="info"><b>书名</b> <b>作者</b></div>
            </div>
            <div class="bottom book"><img src="images/book.png" alt="book">
                <div class="star"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星 "><img src="images/白.png" alt="五角星"></div>
                <div class="info"><b>书名</b> <b>作者</b></div>
            </div>
            <div class="bottom lastbook"><img src="images/book.png" alt="book">
                <div class="star"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星"><img src="images/黑.png" alt="五角星 "><img src="images/白.png" alt="五角星"></div>
                <div class="info"><b>书名</b> <b>作者</b></div>
            </div>

        </div>

        <script src="script/book.js"></script>

        <footer>
            <div>
                <a href="#">&lt;</a>
                <a href="#">1</a>
                <a href="#" class="current">2</a>
                <a href="#">3</a>
                <a href="#">...</a>
                <a href="#">x</a>
                <a href="#">&gt;</a>
            </div>
            <br><br>
            <span>共x页</span>
        </footer>

    </div>
</body>

</html>